<template>
<!-- 这是案例页面 -->
  <div id="project">
    <div class="conteng">
      <div class="content_title">
        <topLogo></topLogo>
      </div>
      <div class="tab_title">
        <div :class="['tab_title_text', num ? 'widthEffect': '']">
          <p>Projects<span>案例</span></p>
        </div>
        <div class="tab_nav">
          <ul>
            <li><span @click="addClass('0')" :class="['li_animation', num ? 'initialization1': '', {span_border:classNum==0}]">ARORM</span></li>
            <li><span @click="addClass('1')" :class="['li_animation', num ? 'initialization2': '', {span_border:classNum==1}]">CHENGTUO</span></li>
            <li><span @click="addClass('2')" :class="['li_animation', num ? 'initialization3': '', {span_border:classNum==2}]">QIMI</span></li>
            <li><span @click="addClass('3')" :class="['li_animation', num ? 'initialization4': '', {span_border:classNum==3}]">ZHIJIAN</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="view">
      <router-view />
    </div>
    <navMenu></navMenu>
  </div>
</template>

<script>
import navMenu from "../../components/navMenu";
import topLogo from "../../components/topLogo";
export default {
  data () {
    return {
      num: false, //添加动画
      classNum: 0,
    }
  },
  components: {
    navMenu,
    topLogo
  },
  methods: {
    // 添加动画效果
    effect() {
      this.num = true;
    },
    // 添加下边框类名
    addClass(index) {
      var _this = this;
      _this.classNum = index;
      switch (index) {
        case "0":
          _this.$router.push({'path': '/project'});
          break;
        case "1":
          _this.$router.push({'path': '/furnitureCases'});
          break;
        case "2":
          _this.$router.push({'path': '/designer'});
          break;
        case "3":
          _this.$router.push({'path': '/construction'});
          break;
        default:
          break;
      }
    }
  },
  created () {
    // 导航栏选择了哪一个，储存到页面预防刷新的时候回到第一个
    if(sessionStorage.getItem('idNum') == null) {
      this.classNum = 0;
    } else {
      this.classNum = sessionStorage.getItem('idNum');
    }
    // 删除储存页面的导航栏下标
    sessionStorage.removeItem('idNum');
  },
  mounted () {
      var _this = this;
      // 离开或者刷新页面前，把导航栏选择到下标储存到页面，刷新后可以回到刚才的选择
      window.onbeforeunload = function () {
        sessionStorage.setItem('idNum',_this.classNum);
      };
  },
  beforeMount() {
    var _this = this;
    setTimeout(function() {
      _this.effect();  //添加动画类名
    },100)
  },
  beforeDestroy() {
    this.num = false; //去掉添加动画类名
    this.projectBool = false; //去掉显示更多类名
  },
}
</script>

<style lang="less" scoped>
// #project {
//   background: linear-gradient(to bottom, #f1f1f1 0%, #e5e5e5 88%, #d5d5d5 100%);
// }
.content_title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 30px;
}
.tab_title {
  padding: 0px 25px;
  .tab_title_text {
    width: 1px;
    overflow: hidden;
    transition:width 1.5s;
    -webkit-transition:width 1.5s;
    p {
      font-size: 30px;
      width: 200px;
      span {
        font-size: 20px;
        margin-left: 8px;
      }
    }
  }
}
.widthEffect {
  width: 200px!important;
}
.tab_nav {
  margin-top: 35px;
  ul {
    display: flex;
    height: 30px;
    justify-content: space-between;
    li {
      font-size: 14px;
      span {
        display: inline-block;
        padding-bottom: 5px;
      }
    }
  }
}
// tab切换下边框线
.span_border {
  border-bottom: 1px solid #333 !important;
}
// 头部导航栏动画
.li_animation {
  opacity: 0;
  transition-duration: 1s;
  margin-top: 50px;
}
.initialization1 {
  opacity: 1;
  transition-delay: 0s;
  margin-top: 0px;
}
.initialization2 {
  opacity: 1;
  transition-delay: 0.2s;
  margin-top: 0px;
}
.initialization3 {
  opacity: 1;
  transition-delay: 0.4s;
  margin-top: 0px;
}
.initialization4 {
  opacity: 1;
  transition-delay: 0.6s;
  margin-top: 0px;
}
// 头部导航栏动画结束

.view {
  padding: 0px 25px;
  padding-bottom: 100px;
}
</style>